<template>
  <div class="app-container" id="personal">
    <div id="person-info" class="block">
      <img :src="memberInfo.avatar" alt="">
      <div class="text">
        <div class="memberId">编号：{{memberInfo.name}}</div>
        <div class="grade">级别：{{memberInfo.grade}}</div>
      </div>
    </div>
    <div id="achievement" class="block">
      <div class="title">业绩</div>
      <div class="parts">
        <div class="part">
          <div class="num" id="left">
            21687464
          </div>
          <div class="text">左区未结算业绩</div>
        </div>
        <div class="part" id="right">
          <div class="num">
            0
          </div>
          <div class="text">右区未结算业绩</div>
        </div>
      </div>
    </div>
    <div class="items" id="tools">
      <mt-cell :title="tool.title" :id="tool.id" v-for="(tool, index) in toolsList" :key="index">
        <svg-icon slot="icon" width='30' height='30' :icon-class='tool.icon'></svg-icon>
      </mt-cell>
    </div>
    <div id="logout">
      <mt-button size="large" type="primary">退出登录</mt-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'personal',
  data() {
    return {
      memberInfo: {},
      toolsList: [
        {
          id: 'giftAccount',
          title: '赠送资金账户',
          icon: 'account'
        },
        {
          id: 'flowAccount',
          title: '流动资金账户',
          icon: 'account'
        },
        {
          id: 'assetChange',
          title: '资产转赠',
          icon: 'change'
        },
        {
          id: 'register',
          title: '推荐注册',
          icon: 'register'
        },
        {
          id: 'assetCash',
          title: '资产提现',
          icon: 'money'
        },
        {
          id: 'giftAccount',
          title: '赠送资金账户',
          icon: 'account'
        },
        {
          id: 'personalInfo',
          title: '个人资料',
          icon: 'info'
        },
        {
          id: 'security',
          title: '账户安全',
          icon: 'security'
        },
        {
          id: 'bank',
          title: '提现银行',
          icon: 'bankcard'
        },
        {
          id: 'address',
          title: '收货地址',
          icon: 'address'
        },
        {
          id: 'declare',
          title: '公告',
          icon: 'declare'
        }
      ]
    }
  },
  mounted() {
    this.getMemberInfo()
  },
  methods: {
    getMemberInfo() {
      this.$store.dispatch('GetInfo').then((data) => {
        this.memberInfo = {
          name: data.name,
          grade: data.grade,
          avatar: '/static/img/base_person.png'
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#personal {
  background-color: rgb(161, 159, 159);
  > div {
    padding: 15px 15px;
    margin-bottom: 10px;
  }
  .block {
  }
}
#person-info {
  display: flex;
  align-items: center;
  background-color: rgb(34, 33, 33);
  img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
  }
  .text {
    height: 54px;
    color: #efb329;
    padding: 0 20px;
    .memberId {
      font-size: 17px;
    }
    .grade {
    }
  }
}
#achievement {
  background-color: #fff;
  .title {
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(196, 193, 193);
  }
  .parts {
    display: flex;
    justify-content: space-around;
    .part {
      text-align: center;
      .num {
        margin-bottom: 5px;
        font-size: 13px;
      }
      .text {
        font-size: 14px;
      }
    }
  }
}
#tools {
  background-color: #fff;
  overflow: auto;
}
.svg-icon {
  margin-right: 10px;
  width: 1.2em !important;
  height: 1.2em !important;
}
</style>
